<!--
 * @Author: 小巴 2393953821@qq.com
 * @Date: 2024-05-30 14:24:14
 * @LastEditors: 小巴 2393953821@qq.com
 * @LastEditTime: 2024-06-20 11:05:55
 * @FilePath: \drgs_web\src\views\sys\menu\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-containers">
    <el-row >
      <el-col :xl="24">
        <el-card>
          <el-form :inline="true" @submit.native.prevent>
            <el-form-item size="small">
              <el-select v-model="listQuery.appId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="small">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList()"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item size="small">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleCreate"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
          <!-- <el-form :inline="true">
            
          </el-form> -->
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            style="width: 100%"
            :span="24"
            :row-style="{ height: '32px' }"
            :header-row-style="{ height: '32px' }"
            :cell-style="{ padding: '1px' }"
          >
            <el-table-column align="center" label="序号" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.menuId }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="菜单名称">
              <template slot-scope="scope">
                <span>{{ scope.row.menuName }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="菜单排序">
              <template slot-scope="scope">
                <span>{{ scope.row.orderNum }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="菜单路径" width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.path }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="组件地址">
              <template slot-scope="scope">
                <span>{{ scope.row.component }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="权限标识" width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.perms }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="{ row, $index }">
                <el-button
                  @click="apiBtn(row)"
                  icon="el-icon-circle-plus-outline"
                  type="text"
                  size="mini"
                >
                  api按钮
                </el-button>
                <el-button
                  icon="el-icon-edit"
                  type="text"
                  size="mini"
                  @click="handleUpdate(row)"
                >
                  编辑
                </el-button>
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  @click="handleDelete(row, $index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.num"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog class="zc" title="新增菜单" :visible.sync="is_add_menu" width="50%" :close-on-click-modal="false">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        label-width="80px"
      >
        <el-form-item label="应用类型" prop="appId">
          <el-select v-model="addForm.appId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="addForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="addForm.parentId" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.menuId"
              :label="item.menuName"
              :value="item.menuId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单排序" prop="orderNum">
          <el-input v-model="addForm.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="前端路径" prop="path">
          <el-input v-model="addForm.path"></el-input>
        </el-form-item>
        <el-form-item label="组件目录" prop="component">
          <el-input v-model="addForm.component"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-select v-model="addForm.menuType" placeholder="请选择">
            <el-option
              v-for="item in menuType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单状态" prop="status">
          <el-select v-model="addForm.status" placeholder="请选择">
            <el-option
              v-for="item in menuStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" prop="perms">
          <el-input v-model="addForm.perms"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="addForm.icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd">确定创建</el-button>
          <el-button @click="is_add_menu = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog class="zc" title="编辑菜单" :visible.sync="is_edit_menu" width="50%">
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        label-width="80px"
      >
        <el-form-item label="应用类型" prop="appId">
          <el-select v-model="editForm.appId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="editForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="editForm.parentId" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.menuId"
              :label="item.menuName"
              :value="item.menuId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单排序" prop="orderNum">
          <el-input v-model="editForm.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="前端路径" prop="path">
          <el-input v-model="editForm.path"></el-input>
        </el-form-item>
        <el-form-item label="组件目录" prop="component">
          <el-input v-model="editForm.component"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-select v-model="editForm.menuType" placeholder="请选择">
            <el-option
              v-for="item in menuType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单状态" prop="status">
          <el-select v-model="editForm.status" placeholder="请选择">
            <el-option
              v-for="item in menuStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" prop="perms">
          <el-input v-model="editForm.perms"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="editForm.icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitEdit">确定更新</el-button>
          <el-button @click="is_edit_menu = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog class="zc"
      :close-on-click-modal="false"
      title="关联api"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div class="serch" style="margin-bottom: 15px">
        <div>
          <el-button type="primary"  size="mini" @click="configapi">保存关联</el-button>
        </div>
      </div>

      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          prop="date"
          label="api方法"
          width="50">
        </el-table-column>
        <el-table-column prop="method" label="api方法" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="url" label="url"> </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 15px">
        <!-- <el-button type="primary">上一项</el-button>
        <el-button type="primary">下一项</el-button> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paging.page"
          :page-sizes="[10, 20 , 50]"
          :page-size="paging.num"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  menuList,
  // menuDetail,
  // menuEdit,
  // menuDel,
  // apiMenuList,
  // confirmApi,
} from "@/api/menu.js";
import Pagination from "@/components/Pagination";

export default {
  name: "menu",
  components: { Pagination },
  data() {
    return {
      apiId:[],
      menuId:'',
      paging: {
        num: 10,
        page: 1,
        total: 0,
      },
      input: "",
      tableData: [],
      dialogVisible: false,
      addRules: {
        appId: [{ required: true, message: "请选择app", trigger: "blur" }],
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
      },
      editRules: {
        appId: [{ required: true, message: "请选择app", trigger: "blur" }],
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
      },
      addForm: {
        appId: 1,
        menuName: "",
        parentId: 0,
        orderNum: 0,
        path: "",
        component: "#",
        menuType: 0,
        status: 0,
        perms: "#",
      },
      editForm: {
        menuId: 0,
        appId: 1,
        menuName: "",
        parentId: 0,
        orderNum: 0,
        path: "",
        component: "#",
        menuType: 0,
        status: 0,
        perms: "#",
      },
      options: [
        {
          value: 1,
          label: "PC应用",
        },
        {
          value: 2,
          label: "APP应用",
        },
      ],
      menuType: [
        {
          value: 0,
          label: "功能",
        },
        {
          value: 1,
          label: "功能菜单",
        },
        {
          value: 2,
          label: "菜单按钮",
        },
      ],
      menuList: [],
      menuStatus: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "禁用",
        },
      ],
      list: null,
      total: 0,
      listLoading: true,
      is_add_menu: false,
      is_edit_menu: false,
      listQuery: {
        page: 1,
        num: 50,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClose(){
      this.dialogVisible = false
    },
   async configapi() {
      let data={
        apiId:[],
        menuId:''
      }
      this.apiId.forEach(item=>{
        data.apiId.push(item.id)
      })
     data.menuId=this.menuId
      // console.log(data)
      if(data.apiId.length<=0){
        this.$message.error('请至少选择一项api')
      }
      const res = await confirmApi(data);
      console.log(res);

      if(res.status!==200){
       return this.$message.error(res.msg)
      }
      this.dialogVisible = false;
      this.$message.success(res.msg)

    },
    // 表格多选回调
    handleSelectionChange(val) {
     this.apiId=val

      console.log(this.apiId);
    },

    handleSizeChange(val) {
      this.paging.num = val;

      this.getapilist();
    },
    handleCurrentChange(val) {
      this.paging.page = val;

      this.getapilist();
    },
    async getapilist() {
      const res = await apiMenuList(this.paging);
      this.tableData = res.list;
      this.paging.total = Number(res.total);
      console.log(res);
    },
    // api按钮
    apiBtn(data) {
      // console.log(data);
      this.menuId=data.menuId
      this.dialogVisible = true;
      this.getapilist();

    },
    onSubmitAdd() {
      this.$refs["addForm"].validate((valid) => {
        if (!valid) {
          this.$notify({
            title: "操作失败",
            message: "请正确填写数据",
            type: "error",
            duration: 2000,
          });
          return;
        }
        menuAdd(this.addForm)
          .then((response) => {
            if (response.status == 200) {
              this.$notify({
                title: "操作成功",
                message: "添加成功",
                type: "success",
                duration: 2000,
              });
              this.is_add_menu = false;
              this.getList();
            } else {
              this.$notify({
                title: "操作失败",
                message: response.msg,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch(() => {
            //
          });
      });
    },
    onSubmitEdit() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) {
          this.$notify({
            title: "操作失败",
            message: "请正确填写数据",
            type: "error",
            duration: 2000,
          });
          return;
        }
        menuEdit(this.editForm)
          .then((response) => {
            if (response.status == 200) {
              this.$notify({
                title: "操作成功",
                message: "更新成功",
                type: "success",
                duration: 2000,
              });
              this.is_edit_menu = false;
              this.getList();
            } else {
              this.$notify({
                title: "操作失败",
                message: response.msg,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch(() => {
            //
          });
      });
    },
    handleUpdate(row) {
      this.is_edit_menu = true;
      menuDetail(row.menuId).then((response) => {
        if (response.status == 200) {
          (this.editForm.menuId = response.data.menuId),
            (this.editForm.appId = response.data.appId),
            (this.editForm.menuName = response.data.menuName),
            (this.editForm.parentId = response.data.parentId),
            (this.editForm.orderNum = response.data.orderNum),
            (this.editForm.path = response.data.path),
            (this.editForm.component = response.data.component),
            (this.editForm.menuType = response.data.menuType),
            (this.editForm.status = response.data.status),
            (this.editForm.perms = response.data.perms);
        } else {
          this.$notify({
            title: "操作失败",
            message: response.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    handleCreate() {
      this.is_add_menu = true;
      this.addForm.appId = 1;
      this.addForm.menuName = "";
      this.addForm.parentId = 0;
      this.addForm.orderNum = 0;
      this.addForm.path = "";
      this.addForm.component = "#";
      this.addForm.menuType = 0;
      this.addForm.status = 0;
      this.addForm.perms = "#";
    },
    getList() {
      this.$getFlag().then(obj=>{
        this.listLoading = false;
        menuList(this.listQuery,obj.data).then((response) => {
          this.list = response.list;
          this.total = response.total;
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      })
      
    },
    handleDelete(row, index) {
      this.$confirm("确定要删除菜单吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          menuDel(row.menuId).then((response) => {
            if (response.status == 200) {
              this.$notify({
                title: "操作成功",
                message: "删除菜单成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "操作失败",
                message: response.msg,
                type: "error",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {
          //
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.zc{
  ::v-deep .el-dialog{
    border-radius: 10px;
  }
  ::v-deep .el-dialog__header{
    background-color: #5AB0FF;
    border-radius: 10px 10px 0 0;
  }
  ::v-deep .el-dialog__title{
    color: #fff !important;
    position: relative;
    top: -4px;
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close{
    color: #fff !important;
  }

}

 ::v-deep .el-dialog{
    border-radius: 10px;
  }
  ::v-deep .el-dialog__header{
    background-color: #5AB0FF;
    border-radius: 10px 10px 0 0;
  }
  ::v-deep .el-dialog__title{
    color: #fff !important;
    position: relative;
    top: -4px;
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close{
    color: #fff !important;
  }
</style>
